<template>
	<view class="container">
		<view class="banner">
			<swiper class="t-swiper" indicator-dots autoplay circular indicator-active-color="#ffffff">
				<swiper-item class="t-swiper-item" v-for="item in bannerItemList">
					<image src="@/static/demo.jpg"></image>
				</swiper-item>
			</swiper>
			
			<view class="lucky-hello">
				<view class="lucky-hello-content">
					<view class="avater">
						<image src="@/static/c1.png"></image>
					</view>
					<text>hey，和瑞幸打招呼</text>
				</view>
			</view>
		</view>
		
		<view class="lucky-foundation-wrapper">
			<view class="lucky-content">
				<view class="lucky-content-buy">
					<FoundationItem title="到店取" sub-title="副标题" @click="toMenu('get')">
						<image  src="@/static/get-self.png"></image>
					</FoundationItem>
					<FoundationItem title="幸运送" sub-title="哈哈哈哈" @click="toMenu('send')">
						<image  src="@/static/luck-send.png"></image>
					</FoundationItem>
					<FoundationItem title="商城购" sub-title="我缺了好大一块" @click="testApi">
						<image  src="@/static/mall-buy.png"></image>
					</FoundationItem>
				</view>
				<view class="lucky-content-money">
					<FoundationItem small title="充4赠3" sub-title="副标题" @click="toMenu">
						<image  src="@/static/money1.png"></image>
					</FoundationItem>
					<FoundationItem small title="礼品卡" sub-title="副标题" @click="toMenu">
						<image  src="@/static/money1.png"></image>
					</FoundationItem>
					<FoundationItem small title="福利群" sub-title="副标题" @click="toMenu">
						<image  src="@/static/money1.png"></image>
					</FoundationItem>
					<FoundationItem small title="拼单满减" sub-title="副标题" @click="toMenu">
						<image  src="@/static/money1.png"></image>
					</FoundationItem>
				</view>
			</view>
		</view>
		
		<!-- 活动 -->
        <view class="lucky-active">
			<swiper class="t-activity-swiper" indicator-dots autoplay circular indicator-active-color="#ffffff">
				<swiper-item class="t-activity-item" v-for="item in activityInfo">
					<image src="@/static/activity.png"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view style="height:200rpx"></view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import FoundationItem from "./foundationItem.vue";
	import {request} from "@/common/util.js";
	
	const bannerItemList = ref([
		{
			id:Math.random().toString(36).slice(-8),
			img:"",
			targetLink:''
		},
		{
			id:Math.random().toString(36).slice(-8),
			img:"",
			targetLink:''
		},
		{
			id:Math.random().toString(36).slice(-8),
			img:"",
			targetLink:''
		}
	])
	function getBannerList(){
		
	}
	
	
	const activityInfo = [
		{
			id:Math.random().toString(36).slice(-8),
			img:''
		},
		{
			id:Math.random().toString(36).slice(-8),
			img:''
		}
	]
	function getActivityInfo () {
		
	}
	
	async function testApi(){
		console.log('iii')
		const data = await request({url:'/api/hello'})
		console.log(data)
		
	}
	
	function toMenu(way){
		getApp().globalData.menuPageRefresh = true
		if(way === "get"){
			return uni.switchTab({url:'/pages/menu/menu'})
		}
		getApp().globalData.coffee_get_way = 'send'
		uni.switchTab({url:"/pages/menu/menu"})
	}
	function toMall(){
		
	}
</script>

<style lang="less">
	.container {
		height:100%;
		.banner {
			position: relative;
			height:500rpx;
			::v-deep .uni-swiper-dots-horizontal {
				bottom:100rpx;
			}
			::v-deep .uni-swiper-dot-active {
				border-radius:20rpx;
				width:40rpx;
			}
			.t-swiper {
				height:100%;
				.t-swiper-item {	
						image {
							width:100%;
							height:100%;
						}
				}
			}
			
			.lucky-hello {
				position: absolute;
				width:100%;
				bottom:0;
				display:flex;
				justify-content: center;
				.lucky-hello-content {
				    background-color: #2D3036;
					width:95%;
					border-radius: 20rpx 20rpx 0 0;
					bottom:100%;
					padding:12rpx 0;
					display:flex;
					align-items: center;
					justify-items: center;
					padding-left:20rpx;
					box-sizing: border-box;
					@avater-size : 50rpx;
					.avater {
						display:flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background-color: white;
						margin:0 20rpx;
						
						image {
							width:@avater-size;
							height:@avater-size;
						}
					}

					text {
						font-size:25rpx;
						font-weight: 600;
						color:#D0A962;
					}
				}
			}
			
			
		}
        .lucky-foundation-wrapper {

			display:flex;
			justify-content: center;
			.lucky-content {
				width:95%;
				border-radius:0 0 20rpx 20rpx;
				background-color: #FFF;
				
				.lucky-content-buy {
					display:grid;
					grid-template-columns: repeat(3,1fr);
					padding:30rpx 0;
				}
				.lucky-content-money {
					display:grid;
					grid-template-columns: repeat(4,1fr);
					padding-bottom:30rpx;
					
				}
				
			}
		}
	
	     
		/**
		 * 互动轮播
		 */
		.lucky-active {
			margin-top:20rpx;
			height:200rpx;
			display:flex;
			justify-content: center;
			
			.t-activity-swiper {
				width:95%;
				height:100%;
				.t-activity-item {	
						image {
							width:100%;
							height:100%;
						}
				}
			}
			
		}
		
	
	}
</style>
